<template>
    <div class="submission-list-container" v-loading="loading">
      <el-page-header @back="goBack" class="page-header">
        <template #content>
          <span class="text-large font-600 mr-3"> 考核答卷列表 </span>
        </template>
      </el-page-header>
  
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>答卷列表 (考核 ID: {{ examId }})</span>
          </div>
        </template>
        <el-table :data="submissions" style="width: 100%">
          <el-table-column prop="examSubmission.id" label="答卷ID" width="100"></el-table-column>
          <el-table-column prop="user.name" label="考生姓名" width="150"></el-table-column>
          <el-table-column prop="examSubmission.submitTime" label="提交时间" width="200">
            <template #default="{ row }">
              {{ formatTime(row.examSubmission.submitTime) }}
            </template>
          </el-table-column>
          <el-table-column prop="examSubmission.totalScore" label="得分" width="100"></el-table-column>
          <el-table-column prop="examSubmission.gradingStatus" label="状态" width="120">
            <template #default="{ row }">
              <el-tag :type="statusType(row.examSubmission.gradingStatus)">
                {{ gradingStatusText(row.examSubmission.gradingStatus) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" fixed="right">
            <template #default="{ row }">
              <el-button size="small" type="primary" @click="navigateToGrade(row.examSubmission.id)">
                前往批改
              </el-button>
            </template>
          </el-table-column>
        </el-table>
  
        <el-pagination
          @current-change="handlePageChange"
          :current-page="currentPage"
          :page-size="pageSize"
          :total="total"
          layout="total, prev, pager, next, jumper"
          background
          class="mt-4 justify-content-center"
        ></el-pagination>
      </el-card>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted } from 'vue';
  import { useRoute, useRouter } from 'vue-router';
  import { useExamStore } from '@/stores/exam.js';
  import { storeToRefs } from 'pinia';
  import dayjs from 'dayjs';
  
  const route = useRoute();
  const router = useRouter();
  const examStore = useExamStore();
  
  const { submissions, total, loading } = storeToRefs(examStore);
  
  const examId = ref(route.params.examId);
  const currentPage = ref(1);
  const pageSize = ref(10);
  
  const fetchSubmissionsData = () => {
    examStore.fetchSubmissionsByExamId({
      examId: examId.value,
      pageNo: currentPage.value,
      pageSize: pageSize.value,
    });
  };
  
  onMounted(() => {
    fetchSubmissionsData();
  });
  
  const handlePageChange = (page) => {
    currentPage.value = page;
    fetchSubmissionsData();
  };
  
  const navigateToGrade = (submissionId) => {
    router.push(`/grade-submission/${submissionId}`);
  };
  
  const goBack = () => {
    router.back();
  };
  
  const formatTime = (timeStr) => {
    return timeStr ? dayjs(timeStr).format('YYYY-MM-DD HH:mm:ss') : 'N/A';
  };
  
  const gradingStatusText = (status) => {
    const map = {
      pending: '待批改',
      grading: '批改中',
      completed: '已完成',
    };
    return map[status] || '未知';
  };
  
  const statusType = (status) => {
    const map = {
      pending: 'info',
      grading: 'warning',
      completed: 'success',
    };
    return map[status] || 'info';
  };
  </script>
  
  <style scoped>
  .submission-list-container {
    padding: 20px;
    background-color: #f5f7fa;
  }
  .page-header {
    margin-bottom: 20px;
    background-color: #fff;
    padding: 16px 24px;
    border-radius: 4px;
  }
  .box-card {
    margin-bottom: 20px;
  }
  .mt-4 {
    margin-top: 1.5rem;
  }
  .justify-content-center {
      justify-content: center;
  }
  </style>